<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      cursor: none
    }

    body {
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .loading {
      background-color: #ffffff;
      display: fixed
    }

    .loading img {
      display: block;
      min-width: 200px;
      min-height: 209px;
    }

    .mouse {
      height: 25px;
      width: 25px;
      border-radius: 100%;
      background-color: #fff782;
      position: absolute;
      animation: mouseAnimation .5s infinite ease-in-out alternate;
      left: 0;
      top: 0
    }

    @keyframes mouseAnimation {
      from {
        width: 25px;
        height: 25px
      }

      to {
        width: 15px;
        height: 15px
      }
    }
  </style>
</head>

<body>
  <div class="loading">
    <img src="https://tmc-website-moban.oss-cn-beijing.aliyuncs.com/Snippets/pikachu/loading.gif" alt="Loading">
  </div>
  <div class="mouse original"></div>
  <script>
    $(".loading").height($(window).height());
    $(".loading").width($(window).width());
    $(".loading img").css({
      paddingTop: ($(".loading").height() - $(".loading img").height()) / 2,
      paddingLeft: ($(".loading").width() - $(".loading img").width()) / 2
    });
    $(window).resize(function () {
      "use strict";
      $(".loading").height($(window).height());
      $(".loading").width($(window).width());
      $(".loading img").css({
        paddingTop: ($(".loading").height() - $(".loading img").height()) / 2,
        paddingLeft: ($(".loading").width() - $(".loading img").width()) / 2
      });
    });
    $(window).mousemove(function (e) {
      "use strict";
      $(".original").css({
        left: e.pageX - 16,
        top: e.pageY - 16
      });
    });
    $("body").on("click", function (e) {
      "use strict";
      $(".original").clone(true).appendTo("body").css({
        left: e.pageX - 16,
        top: e.pageY - 16
      }).removeClass("original");
    });
  </script>
</body>

</html>